<template>
    
    <div>
        <h3>标签管理</h3>
        <!-- 标签容器已经被初始化而且内容多余0条，则显示内容 -->
        <div v-if="tags && tags.length > 0">
            <tag v-for="tag in tags" :text="tag" :key="tag" @delete="onTagDelete"/>
        </div>
        <!-- 否则，标签只是被初始化了，但是没有数据 -->
        <div v-else-if="tags">没有标签了</div>
	
        <!-- 标签容器还没被初始化 -->
        <div v-else>标签加载中...</div>
        <button @click="addTag">添加标签</button>
     <ol type="1">
     
       <div v-for="info in 100" :key="info" class="paragraph_indent">
          <li>{{info}}</li>
        </div>
    </ol>
    
  
    </div>
</template>
<script>
    import Tag from '@/components/tag'
    import mybacktop from '@/components/mybacktop'
    export default {
        name: 'testpage',
        components: {
            Tag,
	    mybacktop
        },
        created() {
            // 从网络加载tag数据.
            this.tags=["test0"];
	    	this.getMessage();
        },
        methods: {
	    getMessage() {
	    	console.log('created');
	    	this.$request.get('http://localhost:5000/Ping')
		.then((response) => {
                    // 回调函数，获取后端返回的数据
                    console.log(response.data)
		    //this.cards=response.data.cards;
                }).catch((error) => {
                    // 捕捉异常并抛出
                    console.log(error);
                });
	    },
            // 添加tag
            addTag() {
	    	console.log(this.tags)
                this.tags.push("标签" + this.tags.length);
            },
            onTagDelete(tag) {
                // 从数组中移除。
                this.tags.splice(this.tags.indexOf(tag), 1);
            }
        },
	
        data() {
            return {
                tags: undefined, // 初始化是没有 tag数据的，在页面打开后，通过网络请求获取标签。
            }
        }
    }
</script>
<style scoped></style>